<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="options" :columns="columns" ref="crudRef">
    </ma-crud>
  </div>
</template>
<script setup>
import {ref, reactive} from 'vue'
import depot from '@/api/warehouse/depot'
import {Message} from '@arco-design/web-vue'
import tool from '@/utils/tool'
import * as common from '@/utils/common'

const crudRef = ref()

const options = reactive({
  id: 'depot',
  pageLayout: 'fixed',
  rowSelection: {
    showCheckedAll: true
  },
  pk: 'id',
  operationColumn: true,
  operationColumnWidth: 160,
  formOption: {
    viewType: 'modal',
    width: '60%',
    layout: [
      {
        formType: 'grid-tailwind',
        colNumber: 2,
        cols: [
          {
            formList: [
              {dataIndex: "name"},
              {dataIndex: "code"},
              {dataIndex: "name_en"},
              {dataIndex: "area"},
              {dataIndex: "manager"},
              {dataIndex: "mobile"},
              {dataIndex: "phone"},
              {dataIndex: "status", formType: 'switch', checkedValue: '1', uncheckedValue: '0'},
              {dataIndex: "remark"},
              {dataIndex: "fedex_account_id"}
            ]
          },
          {
            formList: [
              {dataIndex: "address1"},
              {dataIndex: "city"},
              {dataIndex: "state"},
              {dataIndex: "country"},
              {dataIndex: "postcode"},
              {dataIndex: "opentime"},
              {dataIndex: "openday"},
              {dataIndex: "sea"},
              {dataIndex: "wechat_url"},
            ]
          }
        ]
      }
    ]
  },
  api: depot.getList,
  add: {
    show: true,
    api: depot.save,
    auth: ['warehouse:depot:save']
  },
  edit: {
    show: true,
    api: depot.update,
    auth: ['warehouse:depot:update']
  },
  delete: {
    show: true,
    api: depot.deletes,
    auth: ['warehouse:depot:delete']
  }
})

const columns = reactive([
  {
    title: "主键",
    dataIndex: "id",
    formType: "input",
    display: false,
    hide: true,
  },
  {
    title: "站点名称",
    dataIndex: "name",
    formType: "input",
    search: true,
    commonRules: {
      required: true,
      message: "请输入站点名称"
    }
  },
  {
    title: "仓库代码",
    dataIndex: "code",
    formType: "input",
    addDisabled: false,
    editDisabled: true,
    search: true,
    commonRules: {
      required: true,
      message: "请输入仓库代码"
    }
  },
  {
    title: "站点名称(英)",
    dataIndex: "name_en",
    formType: "input",
    commonRules: {
      required: true,
      message: "请输入站点名称(英)"
    }
  },
  {
    // todo 选择区域
    title: "收货区域",
    dataIndex: "area",
    formType: "select",
    dict:{
        url: 'warehouse/area/list',
        props: {label: 'name', value: 'id'},
        translation: true,
        params:{
          select: 'id,name',
        }
      },
    commonRules: {
      required: true,
      message: "请选择收货区域"
    }
  },
  {
    title: "负责人",
    dataIndex: "manager",
    formType: "input",
    search: true,
    commonRules: {
      required: true,
      message: "请输入负责人"
    }
  },
  {
    title: "联系手机",
    dataIndex: "mobile",
    formType: "input",
    hide: true
  },
  {
    title: "联系电话",
    dataIndex: "phone",
    formType: "input",
    hide: true
  },
  {
    title: "状态",
    dataIndex: "status",
    formType: "radio",
    type: 'button',
    search: true,
    addDefaultValue: '1',
    dict: {
      data: [
        {label: '启用', value: '1'},
        {label: '禁用', value: '0'}
      ],
      translation: true
    },
    // checkedValue: "1",
    // uncheckedValue: "0"
  },
  {
    title: "国家",
    dataIndex: "country",
    formType: "select",
    dict: {
      name: 'countrys',
      props: {label: (i)=>i.title + '-' + i.key, value: "key"},
      translation: true
    }
  },
  {
    title: "省/州",
    dataIndex: "state",
    formType: "input"
  },
  {
    title: "城市",
    dataIndex: "city",
    formType: "input"
  },
  {
    title: "邮编",
    dataIndex: "postcode",
    formType: "input"
  },
  {
    title: "地址一",
    dataIndex: "address1",
    formType: "input"
  },
  {
  // todo 开放时间/开放日期
    title: "开放时间",
    dataIndex: "opentime",
    formType: "time",
    type:'time-range',
    range: true
  },
  {
    title: "开放日期",
    dataIndex: "openday",
    formType: "checkbox",
    dict: {
      name: 'week',
      translation: true
    }
  },
  {
    title: "创建者",
    dataIndex: "created_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "更新者",
    dataIndex: "updated_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "更新时间",
    dataIndex: "updated_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "删除时间",
    dataIndex: "deleted_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "备注",
    dataIndex: "remark",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "海外仓",
    dataIndex: "sea",
    formType: "radio",
    addDefaultValue:'0',
    dict:{
      data:[
        {label: '是', value: '1'},
        {label: '否', value: '0'}
      ],
      translation: true
    },
    search: true
  },
  {
    title: "Fedex账号",
    dataIndex: "fedex_account_id",
    formType: "select",
    dict:{
      url:'warehouse/depotAccount/list',
      props: {label: 'title', value: 'id'},
      translation: true
    },
    hide: true
  },
  {
    title: "企业微信",
    dataIndex: "wechat_url",
    formType: "input",
    hide: true
  },
])
</script>
<script> export default {name: 'warehouse:depot'} </script>